<template>
  <div class="thumb-panel">
    <div>
      <a-image class="arrow" :src="require('@/assets/goods-detail-thumb-arrow-left.png')" alt="" @click.native="thumbLeftClick" />
    </div>
    <div>
      <scroll-view class="scroll-view" ref="scrollView" :scrollX="true" :data="thumbs">
        <div class="content">
          <div class="thumb-item" v-for="(thumb, index) in thumbs" :key="index">
            <a-video v-if="thumb && thumb.indexOf('.mp4') !== -1" class="thumb" :src="thumb" :poster="poster" @mouseover.native="$emit('mouseover', $event, thumb, index)" @click.native="thumbClick(thumb, index)" />
            <a-image v-else class="thumb" :src="thumb" @mouseover.native="$emit('mouseover', $event, thumb, index)" @click.native="thumbClick(thumb, index)" />
          </div>
        </div>
      </scroll-view>
    </div>
    <div>
      <a-image class="arrow" :src="require('@/assets/goods-detail-thumb-arrow-right.png')" @click.native="thumbRightClick" />
    </div>
  </div>
</template>

<script>
import ScrollView from "@/components/htxincailiao/ScrollView.vue";

export default {
  name: "ProductThumb",
  components: { ScrollView },
  props: {
    thumbs: {
      type: Array,
      require: true,
      default: () => {
        return undefined;
      },
    },

    poster: {
      type: String,
      default: undefined,
      require: false,
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    thumbLeftClick() {
      this.moveDeltaX(1 * 64);
    },

    thumbRightClick() {
      this.moveDeltaX(-1 * 64);
    },

    moveDeltaX(deltaX) {
      if (this.$refs && this.$refs.scrollView) {
        this.$refs.scrollView.moveDeltaX(deltaX);
      }
    },

    thumbClick(thumb, index) {
      // console.log("\n\n thumb click:" + JSON.stringify(thumb) + "\n\n");
      this.cover = this.$fileBaseURL + thumb;
    },

  
  },
};
</script>

<style scoped lang="less">
.thumb-panel {
  width: 400px;
  height: ~"calc(18px + 54px + 18px)";
  display: flex;
  flex-direction: row;
  align-items: center;
}

.thumb-panel .scroll-view {
  height: 70px;
  width: 336px;
  overflow: hidden;
}

.scroll-view .content {
  width: fit-content;
  display: flex;
}

.scroll-view .content .thumb-item .thumb {
  width: 54px;
  height: 54px;
  margin: 0 5px;
}

.arrow {
  width: 16px !important;
  padding: 8px 8px;
}

.thumb-item .media {
  margin: auto 10px;
  width: 54px;
  height: 54px;
  object-fit: cover;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.thumb-item .media:hover {
  border: 1px solid var(--r-primary-color);
}

.cover .ls-a-image img {
  // margin-top: 10px;
  width: 400px;
  height: 400px;
  object-fit: cover;
}
</style>
